<template>
  <header>
    <div class="left">
      <!-- 返回首页的icon -->
      <router-link :to="{ name: 'Home' }" class="btn btn-icon">
        <i class="icon icon-home"></i>
      </router-link>

      <!-- 跳转到看板的icon -->
      <router-link :to="{ name: 'Board' }" class="btn btn-icon">
        <i class="icon icon-board"></i>
        <span class="txt">看板</span>
      </router-link>
    </div>

    <!-- 返回首页的logo -->
    <router-link :to="{ name: 'Home' }" class="logo"> </router-link>

    <div class="right">
      <a href="#" class="btn btn-icon"><i class="icon icon-add"></i></a>
      <PopUp :title="user.name">
        <button class="avatar">
          <!-- 取名字第一字母的大写作为头像 -->
          <span>{{ user.name[0].toUpperCase() }}</span>
        </button>
        <PopUpMenu
          slot="content"
          :items="menuItems"
          @action="action"
        ></PopUpMenu>
      </PopUp>
    </div>
  </header>
</template>

<script>
import PopUp from "@/components/PopUp/popup";
import PopUpMenu from "@/components/PopUp/popupMenu";
import { mapState } from "vuex";

export default {
  name: "Header",
  components: { PopUp, PopUpMenu },

  data() {
    return {
      menuItems: [{ name: "退出", action: "logout" }],
    };
  },

  computed: {
    ...mapState("user", {
      user: (state) => state.info,
    }),
  },

  methods: {
    action(actionName) {
      switch (actionName) {
        case "logout": {
          this.logout();
          break;
        }
        default:
          break;
      }
    },

    logout() {
      this.$store.dispatch("user/logout");

      this.$router.push({ name: "Login" });
    },
  },
};
</script>

<style>
</style>